<template>
	<div :class="[disabled ? 'is_disabled' : 'is_valid']" class="x-edit-box">
		<div :id="'toolbar-' + uuid" class="toolbar" />
		<div ref="editor" :id="'editor-' + uuid" class="x-editor" />
	</div>
</template>

<script>
import objMixin from './objMixin'
import { crmFileSave, crmFileDelete } from '@/api/common'
import { v4 } from 'uuid'
import E from 'wangeditor'
export default {
	mixins: [objMixin],
	data() {
		return {
			editor: null, // 富文本编辑器
			uuid: v4()
		}
	},
	watch: {
		value(val) {
			if (this.editor) {
				// 判断值不同才赋值，解决无法回车换行的问题
				const html = this.editor.txt.html()
				if (val.html !== html) {
					this.editor.txt.html(val.html)
				}
			}
		}
	},
	mounted() {
		const editor = new E('#toolbar-' + this.uuid, '#editor-' + this.uuid)
		// editor.config.zIndex = 10
		editor.config.placeholder = this.item.placeholder || '编辑内容'
		editor.config.excludeMenus = ['emoticon', 'video', 'code']
		editor.config.colors = [
			'#000000',
			'#eeece0',
			'#1c487f',
			'#4d80bf',
			'#00ff00',
			'#ff0000',
			'#0000ff',
			'#00ffff',
			'#ffff00',
			'#ff00ff',
			'#007800',
			'#780078'
		]
		// 配置 onchange 回调函数
		editor.config.onchange = (newHtml) => {
			if (newHtml !== this.value.html) {
				this.valueChange({
					html: newHtml
				})
			}
			// 解决首字母没有输入法框的问题
			if (newHtml === '') {
				const textarea = this.$refs['editor'].querySelector(
					'[contenteditable=true]'
				)
				if (!textarea) return
				textarea.blur()
				setTimeout(() => {
					textarea.focus()
				}, 100)
			}
		}
		// 配置触发 onchange 的时间频率，默认为 200ms
		editor.config.onchangeTimeout = 224 // 修改为 200ms

		editor.create()
		editor.txt.html(this.value.html)
		this.editor = editor
	},
	methods: {
		selectImage() {
			if (!this.disabled) {
				document.getElementById('xhEditFiles' + this.uuid).click()
			}
		},
		/** 图片选择 */
		xhUploadFile(event) {
			var files = event.target.files
			var self = this
			var firstFile = files[0]
			this.sendFileRequest(firstFile, () => {
				for (let index = 1; index < files.length; index++) {
					const file = files[index]
					this.sendFileRequest(file)
				}
				event.target.value = ''
			})
		},
		// 发送请求
		sendFileRequest(file, result) {
			var params = { file: file }
			if (this.batchId) {
				params.batchId = this.batchId
			}
			crmFileSave(params)
				.then((res) => {
					if (this.batchId == '') {
						this.batchId = res.batchId
					}
					res.size = fileSize(res.size)
					this.dataValue.files.push(res)
					this.$emit('value-change', {
						item: this.item,
						index: this.index,
						value: this.dataValue
					})
					if (result) {
						result()
					}
				})
				.catch(() => {})
		},
		/** 删除图片 */
		deleteFile(item, index) {
			this.$confirm('您确定要删除该文件吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					crmFileDelete({
						id: item.fileId
					})
						.then((res) => {
							this.dataValue.files.splice(index, 1)
							this.$emit('value-change', {
								item: this.item,
								index: this.index,
								value: this.dataValue
							})
							this.$message.success('操作成功')
						})
						.catch(() => {})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					})
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.x-edit-box {
	border: 1px solid #e0e0e0;
	position: relative;
	width: 100%;
	line-height: 15px;
	position: relative;
	&:hover .toolbar {
		pointer-events: painted;
		opacity: 1;
	}
}
.x-editor {
	min-height: 80px;
	max-height: 300px;
	overflow: auto;
	resize: vertical;
}
.toolbar {
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s 0s;
	position: absolute;
	z-index: 9999;
	left: 0;
	right: 0;
	width: 100%;
	bottom: 99%;
	box-shadow: 0 0 10px 1px #e0e0e0;
}
::v-deep {
	.w-e-toolbar {
		overflow-x: visible;
	}
	.w-e-menu {
		z-index: auto !important;
	}
	.w-e-toolbar .w-e-droplist {
		z-index: 99999;
	}
}
</style>
